<template>
  <el-button :size="size" v-bind="$attrs" v-on="$listeners" @click.prevent="handleClick" ref="btn">
    <slot></slot>
  </el-button>
</template>

<script>
  export default {
    /** 因为设置了动画,导致在dialog或者drawer中内容先销毁进而引发控制台$el相关的报错，所以在dialog或者drawer中直接使用el-button **/
    name: "my-async-button",
    props: {
      /** 延时器时间 **/
      timeout:{
        type: Number
      },
      /** 默认大小mini **/
      size:{
        type: String,
        default: 'mini'
      }
    },
    data(){
      return{
        buttonTimer: null
      }
    },
    methods: {
      handleClick(){
        /** 设置触发延时0.3s,用于查询按钮防抖,使用时@search调用方法 **/
        clearTimeout(this.buttonTimer);
        this.buttonTimer = setTimeout(()=>{
          this.$emit('search')
        },this.timeout|300)

        /** 果冻动画 **/
        this.setAnimation('btn','jello-horizontal',900)
      }
    }
  }
</script>

<style scoped>

</style>
